<template>
  <div class="chat__status flex flex-center" v-show="chatStore.isChating">
    <div
      class="action-status stop fs-12"
      @click="stopMessage"
      v-show="chatStore.status === 'chating'"
    >
      <svg-icon icon-class="stop-btn" />
      <span>停止</span>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: '',
  inject: ['stopMessage', 'resendMessage', 'reEditMessage'], // 接收方法
  computed: {
    ...mapGetters(['chatStore'])
  }
}
</script>

<style lang="scss" scoped>
.chat__status{
  // overflow: hidden;
}
.action-status {
  margin-top: 12px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: rgba(255,255,255,0.1);
  padding: 7px 20px;
  border-radius: 24px;
  color: $color-white;
  font-size: $font-size-base;
  cursor: pointer;
  .svg-icon {
    margin-right: 8px;
    font-size: 16px;
  }
  &:hover {
    background: rgba(255,255,255,0.2);
  }
}
</style>
